<template>
	<view class="a">
		<!-- 选择按钮 -->
		<view class="choose-btn">
			<view class="zhaopin" :style="{'border-bottom': keyA == '招聘'?' #1296db 5rpx solid':'#fff'}" @click="changeType('招聘')">
				<text>招聘</text>
			</view>
			<view class="qiuzhi" :style="{'border-bottom': keyA == '求职'?' #1296db 5rpx solid':'#fff'}" @click="changeType('求职')">
				<text>求职</text>
			</view>
		</view>
		<u-line color="#629eff"></u-line>
		<!-- 招聘 -->
		<view v-show=" keyA == '招聘'">
			
			<view v-for="(item,index) in recruitList" :key="index" @click="cardClickRecruit(item.recruitId)"
				style="border-radius: 20rpx;display: flex;justify-content: center;margin: 20rpx;padding: 14rpx;background-color: #fff;">
				<view style="width: 260rpx;height: 190rpx;border-radius: 20rpx;overflow: hidden;">
					<image style="width: 100%;height: 100%;" :src="picUrl" mode="aspectFill">
					</image>
				</view>
				<view style="width: 100%;margin-left: 20rpx;display: flex;flex-direction: column;">
					<view style="font-size: 28rpx;margin-bottom: 12rpx;">
						{{item.recruitmentUnit}}
					</view>
					<view
						style="margin-bottom: 12rpx;font-size: 26rpx;color: #909399;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;text-overflow: ellipsis;">
						{{item.recruitJob}}
					</view>
					<view style="align-self: flex-start;margin-bottom: 12rpx;">
						<text class="etcString" style="background-color: #F9AE3D;">{{item.recruitSalary}}</text>
					</view>
					<view style="display: flex;justify-content: flex-end;">
						<view style="margin-left: 10rpx;font-size: 22rpx;color: #909399;">{{item.createTime}}</view>
						<view
							style="margin-left: 10rpx;display: flex;justify-content: start;font-size: 22rpx;color: #909399;">
							<u-icon color="#20C3FE" name="eye"></u-icon>
							<text>{{item.lookNum}}</text>
						</view>
						<view
							style="margin-left: 10rpx;display: flex;justify-content: start;font-size: 22rpx;color: #909399;">
							<u-icon name="star" color="#ffaa00"></u-icon>
							<text>{{item.collect}}</text>
						</view>
					</view>
				</view>
			</view>
	
		</view>
		
		<!-- 求职 -->
		<view  v-show="keyA=='求职'">
			
			<view v-for="(item,index) in jobHuntList" :key="index" @click="cardClickJobHunt(item.jobHuntId)"
				style="border-radius: 20rpx;display: flex;justify-content: center;margin: 20rpx;padding: 14rpx;background-color: #fff;">
				<view style="width: 260rpx;height: 190rpx;border-radius: 20rpx;overflow: hidden;">
					<image style="width: 100%;height: 100%;" :src="picUrl_job" mode="aspectFill">
					</image>
				</view>
				<view style="width: 100%;margin-left: 20rpx;display: flex;flex-direction: column;">
					<view style="font-size: 28rpx;margin-bottom: 12rpx;">
						{{item.job}}
					</view>
					<view
						style="margin-bottom: 12rpx;font-size: 26rpx;color: #909399;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;text-overflow: ellipsis;">
						{{item.workHistory}}
					</view>
					<view style="align-self: flex-start;margin-bottom: 12rpx;">
						<text class="etcString" style="background-color: #F9AE3D;">{{item.salary}}</text>
					</view>
					<view style="display: flex;justify-content: flex-end;">
						<view style="margin-left: 10rpx;font-size: 22rpx;color: #909399;">{{item.createTime}}</view>
						<view
							style="margin-left: 10rpx;display: flex;justify-content: start;font-size: 22rpx;color: #909399;">
							<u-icon color="#20C3FE" name="eye"></u-icon>
							<text>{{item.lookNum}}</text>
						</view>
						<view
							style="margin-left: 10rpx;display: flex;justify-content: start;font-size: 22rpx;color: #909399;">
							<u-icon name="star" color="#ffaa00"></u-icon>
							<text>{{item.collect}}</text>
						</view>
					</view>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	import {getRecruitList,getJobHuntList} from '../../config/api.js'
	export default {
		data() {
			return {
				keyA:'招聘',
				recruitList:[],
				jobHuntList:[],
				picUrl:'/static/standbyLogo/pin_logo.png',
				picUrl_job:'/static/standbyLogo/zhao_logo.jpg'
			}
		},
		onLoad() {
			this.init()
			console.log(this.keyA,11);
		},
		onShow() {
			this.init()
		},
		methods: {
			init(){
				// 获取招聘列表
				getRecruitList().then(res => {
					this.recruitList = res.data.data
					/* this.recruitList = res.data.data.map(item => {
						return {
							id: item.id,
							recruitJob: item.recruitJob,
							recruitSalary: item.recruitSalary,
							peopleNum: item.peopleNum,
							recruitAsk: item.recruitAsk,
							workLocation: item.workLocation,
							jobDescription: item.jobDescription,
							recruitContacts: item.recruitContacts,
							recruitmentUnit: item.recruitmentUnit,
							telephone: item.telephone
						}
					}) */
				});
			},
			getjobHuntListA(){
				getJobHuntList().then(res =>{
					this.jobHuntList = res.data.data
				})
			},		
			changeType(e){
				if(e == '求职'){
					this.keyA = '求职';
					console.log(this.keyA);
					this.getjobHuntListA();
				}else{
					this.keyA = '招聘';
					console.log(this.keyA);
					this.init();
				}
			},
			cardClickRecruit(id){
				
				uni.navigateTo({
					url:`/pages/recruit/recruitDetail?id=${id}`
				})
			},
			cardClickJobHunt(id){
				console.log("rr",id);
				uni.navigateTo({
					url:`/pages/recruit/jobHuntDetail?id=${id}`
				})
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	.choose-btn{
		display: flex;
		justify-content: space-between;
		text-align: center;
		height: 80rpx;
		line-height: 80rpx;
		.zhaopin{
			width: 50%;
		}
		.qiuzhi{
			width: 50%;
		}
	}
	
	
	.etcString {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
		text-overflow: ellipsis;
		font-size: 22rpx;
		border-radius: 10rpx;
		line-height: 40rpx;
		padding: 8rpx;
		color: #fff;
	}
</style>
